<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌词页面</title>
    <link rel="stylesheet" href="assets/css/base.css">
    <link rel="stylesheet" href="assets/css/lyrics_page.css">
    <link rel="stylesheet" href="assets/css/common.css">
</head>

<body>
    <!--歌词页面 -->
    <div class="g-bd2">
        <div class="wrap2">
            <!-- 歌词评论模块 -->
            <div class="m-lycifo">
                <div class="f-cb">
                    <!-- 歌手封面 -->
                    <div class="sin-cover">
                        <div class="u-cover">
                            <img src="assets/images/cover2.png" alt="" class="picUrl">
                        </div>
                        <!-- 生成外部链接 -->
                        <a href="javascript:;" class="des">生成外链播放器</a>
                    </div>
                </div>
                <!-- 歌曲 -->
                <div class="m-cnt">
                    <div class="g-wrap4">

                    </div>
                    <div class="m-info">
                        <div class="btns">
                            <a href="javascript:;" class="u-btn-applay">
                                <span>播放</span>
                            </a>
                            <a href="javascript:;" class="u-btn-add"></a>
                            <a href="javascript:;" class="u-btn-fav"><span>收藏</span></a>
                            <a href="javascript:;" class="u-btn-share"><span>分享</span></a>
                            <a href="javascript:;" class="u-btn-dl"><span>下载</span></a>
                            <a href="javascript:;" class="u-btn-commt"><span>222222</span></a>
                        </div>
                        <div class="m-lyric-con">
                            <div class="lyric-content">
                            </div>
                            <a href="javascript:;" class="unfold">展开</a>
                        </div>
                    </div>
                </div>
                <div class="g-wrap3">
                    <!-- 评论模块 -->

                </div>
            </div>
            <!-- 右边推荐模块 -->
            <div class="g-sd2">
                <div class="g-wrap2">
                    <h3 class="u-hd2">
                        包含这首歌的歌单
                    </h3>
                    <ul class="m-rctlist">
                        <li>
                            <div class="head">
                                <img src="assets/images/music.png" alt="">
                            </div>
                            <div class="cntwrap">
                                <div class="cnt">
                                    <a href="javascript:;" class="s-fc">精选|热歌分享</a>
                                </div>
                                <div class="rb">
                                    <a href="javascript:;" class="s-fc">情感文字君</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="head">
                                <img src="assets/images/music.png" alt="">
                            </div>
                            <div class="cntwrap">
                                <div class="cnt">
                                    <a href="javascript:;" class="s-fc">精选|热歌分享</a>
                                </div>
                                <div class="rb">
                                    <a href="javascript:;" class="s-fc">情感文字君</a>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="head">
                                <img src="assets/images/music.png" alt="">
                            </div>
                            <div class="cntwrap">
                                <div class="cnt">
                                    <a href="javascript:;" class="s-fc">精选|热歌分享</a>
                                </div>
                                <div class="rb">
                                    <a href="javascript:;" class="s-fc">情感文字君</a>
                                </div>
                            </div>
                        </li>

                    </ul>
                    <h3 class="u-hd2">
                        相似歌曲
                    </h3>
                    <ul class="m-sglist">
                        <li>
                            <div class="txt">
                                <a href="javascript:;" class="f-thide">心动</a>
                                <a href="javascript:;" class="f-thide">菱镜</a>
                            </div>
                            <div class="opr">
                                <a href="javascript:;'" class="msk-play"></a>
                                <a href="javascript:;'" class="msk-add"></a>
                            </div>
                        </li>
                        <li>
                            <div class="txt">
                                <a href="javascript:;" class="f-thide">心动</a>
                                <a href="javascript:;" class="f-thide">菱镜</a>
                            </div>
                            <div class="opr">
                                <a href="javascript:;'" class="msk-play"></a>
                                <a href="javascript:;'" class="msk-add"></a>
                            </div>
                        </li>
                        <li>
                            <div class="txt">
                                <a href="javascript:;" class="f-thide">心动</a>
                                <a href="javascript:;" class="f-thide">菱镜</a>
                            </div>
                            <div class="opr">
                                <a href="javascript:;'" class="msk-play"></a>
                                <a href="javascript:;'" class="msk-add"></a>
                            </div>
                        </li>
                        <li>
                            <div class="txt">
                                <a href="javascript:;" class="f-thide">心动</a>
                                <a href="javascript:;" class="f-thide">菱镜</a>
                            </div>
                            <div class="opr">
                                <a href="javascript:;'" class="msk-play"></a>
                                <a href="javascript:;'" class="msk-add"></a>
                            </div>
                        </li>
                        <li>
                            <div class="txt">
                                <a href="javascript:;" class="f-thide">心动</a>
                                <a href="javascript:;" class="f-thide">菱镜</a>
                            </div>
                            <div class="opr">
                                <a href="javascript:;'" class="msk-play"></a>
                                <a href="javascript:;'" class="msk-add"></a>
                            </div>
                        </li>
                    </ul>
                    <h3 class="u-hd2">
                        网易云音乐多端下载
                    </h3>
                    <ul class="bg">
                        <li>
                            <a href="javascript:;" class="ios"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="pc"></a>
                        </li>
                        <li>
                            <a href="javascript:;" class="aos"></a>
                        </li>
                    </ul>
                    <p class="s-fc4">同步歌单，随时畅听320k好音乐</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 渲染歌手信息 -->
    <script type="text/html" id="singer">
        <div class="hd">
            <i></i>
            <div class="tit">
                <span>{{name}}</span>
                <!-- <p>顽皮老板喝不醉</p> -->
            </div>
        </div>
        <p class="s-fc2">
            <span class="s-fc2">歌手：</span>
            <a href="javascript:;'" class="des1">{{nikenames}}</a>
        </p>
        <p class="s-fc2">
            <span class="s-fc2">所属专辑：</span>
            <a href="javascript:;'" class="des1">{{name}}</a>
        </p>
    </script>

    <!-- 渲染评论信息 -->
    <script type="text/html" id="lyric-cmmt">
        <div class="n-commt">
            <div class="u-title">
                <h3>评论</h3>
                <span>共{{total}}条评论</span>
            </div>
            <div class="m-commtpt">
                <div class="iptarea">
                    <div class="head">
                        <img src="assets/images/rebot.jpg" alt="">
                    </div>
                    <div class="u-txtwrap">
                        <input type="text" name="commt" id="" placeholder="评论">
                    </div>
                </div>
                <div class="comms">
                    <h3 class="u-hd2">
                        精彩评论
                    </h3>
                    {{each hotComments}}
                    <div class="itm">
                        <div class="head">
                            <img src="{{$value.user.avatarUrl}}" alt="">
                        </div>
                        <div class="cntwrap">
                            <div class="cnt">
                                <a href="javascript:;" class="s-fc">{{$value.user.nickname}}</a>:
                                <span>{{$value.content}}</span>
                            </div>
                            <div class="rb">
                                <div class="time">{{$value.time | Time}}</div>
                                <a href="javascript:;">
                                    <i></i> （7268）
                                </a>
                                <a href="javascript:;" class="s-fc3">回复</a>
                            </div>
                        </div>

                    </div>
                    {{/each}}
                    <h3 class="u-hd2">
                        最新评论（{{total}}）
                    </h3>
                    {{each comments}}
                    <div class="itm">
                        <div class="head">
                            <img src="{{$value.user.avatarUrl}}" alt="">
                        </div>
                        <div class="cntwrap">
                            <div class="cnt">
                                <a href="javascript:;" class="s-fc">{{$value.user.nickname}}</a>:
                                <span>{{$value.content}}</span>
                            </div>
                            <div class="rb">
                                <div class="time">{{$value.time | Time}}</div>
                                <a href="javascript:;">
                                    <i></i> （7268）
                                </a>
                                <a href="javascript:;" class="s-fc3">回复</a>
                            </div>
                        </div>

                    </div>
                    {{/each}}
                    <!-- 分页功能 -->
                    <div class="m-pl-pager">
                        <div class="u-page">
                            <a href="javascript:;" class="btn prv-page">上一页</a>
                            <span id="cunt">....</span>
                            <a href="javascript:;" class="btn nxt-page">下一页</a>
                        </div>
                    </div>
                </div>
            </div>
    </script>

    <script src="assets/lib/jquery.js"></script>
    <script src="assets/lib/axios.js"></script>
    <script src="assets/lib/template-web.js"></script>
    <script src="assets/js/base.js"></script>
    <script src="assets/js/lyric_page.js"></script>

    <script>
        let unfold = document.querySelector('.unfold');
        let lyric = document.querySelector('.lyric-content')
        let flag = 0;
        unfold.addEventListener('click', function() {
            if (flag === 0) {
                lyric.style.height = 'auto';
                this.innerHTML = '收起';
                flag = 1;
            } else if (flag === 1) {
                lyric.style.height = 218 + 'px';
                this.innerHTML = '展开';
                flag = 0;
            }

        })
    </script>



</body>

</html>